<template>
	<view>
		<!-- <view class="tui-searchbox">
			<view class="tui-search-input" @tap="search">

				<icon type="search" size='15' color='#999'></icon>
				<text class="tui-search-text">搜索板块内话题</text>
			</view>
		</view> -->
		<br/>
		<view class="tui-flex-box">
			<view class="tui-flex">


				<view class="tui-left tui-col-8" style="display: flex;margin-left: 30rpx;">
					<image class="communityImage" :src="communityInfo.imgUrl" style="width: 120rpx;" mode="widthFix"></image>

					<view class="tui-flex" style="display: flex;flex-direction: column;margin-left: 30rpx;">
							<view class="tui-top-left tui-col-6" style="height: 100%;width: 300rpx;">
								<text style="font-size: 35rpx;font-weight: bold;">
									{{communityInfo.name}}
								</text>
							</view>


								<view class="tui-flex" >
									<view class="tui-bottom-left tui-col-6">
										<text style="font-size: 24rpx;color: #8d8d8d;font-weight: 400;">
											{{communityInfo.hot}} 热度
										</text>
									</view>
									<view class="tui-bottom-left tui-col-6">
										<text style="font-size: 24rpx;color: #8d8d8d;font-weight: 400;">
											{{communityInfo.topicCount}} 话题
										</text>
									</view>

								</view>


						</view>

				</view>

				<view class="tui-center tui-col-4" style="flex-wrap: nowrap;justify-content: flex-end;margin-right: 40rpx;">
					<tui-button type="danger" plain shape="circle" width="120rpx" @click="checkinClickHandler" :disabled="checkinStatus == '1'" height="60rpx" :size="26" >
						{{checkinStatus == '1' ? '已签到':'签到'}}
					</tui-button>
				</view>
			</view>
		</view>

		<br/>

		<view class="tui-flex-box">
			<view class="tui-flex">
				<view class="tui-center tui-col-3" style="justify-content: flex-start; margin-left: 50rpx;">
					<text style="color:#FF2525;font-weight: bold;">
						达人堂
					</text>
				</view>

				<view class="tui-left tui-col-9" >

				</view>

			</view>

		</view>
		<br/>

		<view style="background-color: #FAFAFA;width: 100%; height: 40rpx;"></view>

		<view class="tui-flex-box">
			<block v-if="topicTopList.length == 0">
				<view style="color: #8A5966;width: 100%; height: 60rpx;text-align: center;line-height: 60rpx;">!! 暂无公告/置顶 !!</view>
			</block>
			<block v-for="(item,index) in topicTopList" :key="index">

				<navigator :url="'/pages/community/topicInfo?topicId=' + item.id" hover-class='none' class="tui-flex" style="height: 100rpx;width: 100%;border-bottom: #000000;" >

					<view class="tui-center tui-col-12" style="display: flex,align-items: center;justify-content: flex-start;margin-left: 40rpx;">
						<tui-tag v-if="item.notice == '1'" margin="10 0 0 0 " shape="circleRight" style="width: 70rpx" type="light-green">公告</tui-tag>
						<tui-tag v-else margin="10 0 0 0 " shape="circleRight" style="width: 70rpx" type="light-orange">置顶</tui-tag>
						<text v-text="textUtils.beyondLimitSubStr(item.title,13,'...')" 
							style="font-size: 30rpx;margin-left: 30rpx;" class="title"></text>


					</view>

				</navigator>
			</block>
		</view>

		<view style="background-color: #FAFAFA;width: 100%; height: 40rpx;"></view>

		<view class="tui-tabs">
		<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false">

			<view  class="tui-tab-item">
				<text class="tui-tab-item-title" @click="tabClick(0)" :class="{ 'tui-tab-item-title-active': tabIndex == 0 }">全部</text>
			</view>


			<view v-for="(tab, index) in topicCategoryList" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" >
				<text class="tui-tab-item-title" @click="tabClick(index+1,tab.id)" :class="{ 'tui-tab-item-title-active': tabIndex == index+1 }">{{ tab.name }}</text>
			</view>
		</scroll-view>
		</view>

		<view class="list-view">
			<view class="tui-flex-box">
				<view class="tui-flex" style="flex-wrap: wrap;" v-for="(item,index) in topicList" :key="index">
					<view :style="index %2 == 0? 'background-color: #FAFAFA;':''" style="width: 100%;box-shadow: 2rpx 1rpx 1rpx #D1D1D1">
						
						
						<view style="height: 30rpx;width: 100%;"></view>
					<navigator :url='"/pages/user/user?id=" + item.memberId' hover-class='none' style="display: flex; ">
						<view class="tui-left tui-col-12" style="margin-left: 30rpx;height: 60rpx;display: flex;">
							<image :src="item.memberAvatar" mode="widthFix" style="width: 60rpx;border-radius: 60rpx;"></image>
							<text style="font-size: 24rpx;font-weight: bold;margin-left: 20rpx;color: #8A5966;display: flex;align-items: center;justify-content: center;">{{item.memberNickname}}</text>
						</view> 
					</navigator>

					<navigator :url="'/pages/community/topicInfo?topicId=' + item.id" hover-class='none' style="display: flex; flex-wrap: wrap;width: 100%;">

						<view class="tui-left tui-col-12" style="margin-left: 30rpx;height: 50rpx;display: flex;width: 100%;" >

							<view class="title" style="margin-left: 70rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;font-weight: bold;">
									<text v-text="textUtils.beyondLimitSubStr(item.title,15,'...')"></text>
									
									<text v-if="item.status.hot == '1'" style="margin-left: 5rpx;color: #FFFFFF; background-color: #FF201F">热</text>
									<text v-if="item.status.elite == '1'" style="margin-left: 5rpx;color: #FFFFFF; background-color: #000000">精</text>
									<text v-if="item.status.newly == '1'"style="margin-left: 5rpx;color: #FFFFFF; background-color: #16AB60">新</text>

							</view>
						</view>
						
						<view class="tui-left tui-col-12" style="width: 100%;margin-left: 100rpx;opacity:0.85;margin-top: 10rpx;display: flex;width: 80%;color: #666666;font-size: 26rpx;" >
							<!-- 定义临时变量 -->
							<view v-show="false">{{imgList = htmlUtils.getImageUrls(item.content,3)}}</view>
							

							<view >
								<text v-text="textUtils.beyondLimitSubStr(htmlUtils.getText(item.content),50,'...')" ></text>
								<view style="display: flex;flex-wrap: nowrap; margin-top: 20rpx;" >
									
									<!-- 如果图片为多张,遍历.而且第二张开始,图片有间隔 -->
									<image v-for="(img,index) in imgList" :key="index" :src="img" :style="index > 0 ?'margin-left: 30rpx;':''" style="height: 100rpx;width: 150rpx;display: flex"></image>
								</view>
							</view>
							

						</view>
						
						

						<view class="tui-left tui-col-12" style="margin-top: 40rpx;margin-left: 40rpx;height: 50rpx;display: flex;flex-wrap: nowrap;">
							

							<view class="tui-left tui-col-6" style="font-size: 20rpx;">

								<text style="font-size: 22rpx;" v-text="relativeTimeGetter.getText(item.createTime)"></text>
							</view>

							<view class="tui-left tui-col-6" style="margin-right: 20rpx;display: flex;justify-content: flex-end;">
								<view style="color: #666666;font-size: 20rpx;" >

									<tui-icon :name="'eye'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.viewCount + '  '">
										{{item.viewCount}}
									</text>

									<tui-icon :name="'message'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.replyCount  + '  '"></text>


									<tui-icon :name="'agree'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.praiseCount  + '  '"></text>

								</view>
							</view>
						</view >
							
					</navigator>
					</view>
					
				</view>

				
			</view>

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
		
		<tui-nomore v-if="endline" backgroundColor="#fff" text="我是有底线的"></tui-nomore>
		
		<tui-no-data v-if="topicNull" :fixed="false" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-no-data>
		
		<view style="tui-center tui-col-12;height: 80rpx;width: 100%;">

		</view>
		
		<!-- <tui-scroll-top :scrollTop="scrollTop" ></tui-scroll-top> -->
		
		<!--uni-app-->
		<tui-fab :right="80"  :height="90" :width="90" @click="addTopicHandler()"></tui-fab>
		

	</view>
</template>

<script>
	import communityApi from '@/request/api/communityApi.js'
	import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
	import textUtils from "@/utils/TextUtils.js"
	import htmlUtils from "@/utils/HtmlUtils.js"


	import userUtils from "@/utils/userUtils.js"


	export default {

		data() {
			return {
				pageParams:{
					pageIndex:1,
					pageSize:10,
					pageTotal:'',
					totalCount:'',
				},
				communityInfo:'',
				communityCategoryId:'',
				communityId:'',
				topicCategoryId:'',
				topicTopList:[],
				topicList:[],
				topicCategoryList:[],
				tabIndex:'0',
				relativeTimeGetter:relativeTimeGetter,
				textUtils:textUtils,
				htmlUtils:htmlUtils,
				loginUser:uni.getStorageSync('user'),
				//当前用户签到状态 1:已签到 0:未签到  2:未登录
				checkinStatus:'',
				loadding: false,
				pullUpOn: true,
				endline:false,
				topicNull:false,
				scrollTop: 0,
				publishData:{
					communityCategoryId:'',
					communityId:'',
				}
			};
		},
		onLoad(param) {
			this.communityCategoryId = param.communityCategoryId
			this.communityId = param.communityId
			this.init();

		},
		methods:{
			init(){
				communityApi.getCommunityInfoByCommunityId(this.communityId).then(response=>{
					console.log(response)
					this.communityInfo = response.data
				
				})
				
				communityApi.getTopicTopByCommunityId(this.communityId).then(response=>{
					this.topicTopList = response.data
					
				
				})
				
				communityApi.getTopicCategoryByCommunityId(this.communityId).then(response=>{
					this.topicCategoryList = response.data
				})
				
				this.getTopicByCommunityIdAndTopicCategoryId();
				
				if(this.loginUser){
					communityApi.getCheckinByMemberId(this.communityId,this.loginUser.id).then(resposne=>{
						console.log(resposne)
						//未签到
						if(resposne.code == '22000'){
							this.checkinStatus = '0';
				
							//已签到
						}else if(resposne.code == '22001'){
							this.checkinStatus = '1';
						}
				
					})
				}else{
					//用户未登录 
					this.checkinStatus = '2';
				}
			},
			getTopicByCommunityIdAndTopicCategoryId(){
			
				communityApi.getTopicByCommunityIdAndTopicCategoryId(this.communityId,this.topicCategoryId,this.pageParams).then(response=>{
					console.log(response)
					if(! response.data){
						this.topicNull = true;
						return;
					}
					this.topicNull = false;
					this.topicList = [...this.topicList,...response.data.list]
					this.pageParams.pageSize = response.data.pageSize;
					this.pageParams.pageIndex = response.data.currPage;
					this.pageParams.pageTotal = response.data.totalPage;
					this.pageParams.totalCount = response.data.totalCount;
					if(response.data.totalPage == response.data.currPage){
						this.endline = true;
					}else{
						this.endline = false;
					}
				})

			},
			tabClick(index,id){
				this.endline = false;
				this.tabIndex = index;
				if(index == 0){
					this.topicCategoryId = '';
				}else{
				this.topicCategoryId = id;
				}
				this.pageParams.pageIndex = 1;
				this.topicList = '';
				this.getTopicByCommunityIdAndTopicCategoryId();
			},
			checkinClickHandler(){
				//用户未签到 调用签到接口
				if(this.checkinStatus == '0'){
					//再次判断用户是否已登录 防止token过期
					userUtils.loginCheck().then(()=>{
						communityApi.checkinByMemberId(this.communityId,this.loginUser.id).then(response=>{
							if(response.code == 0){
								this.checkinStatus = '1';
								uni.showToast({
									title:"签到成功"
								})
							}
						})
					})
					
				}
				//用户未登录 询问用户是否需要登录
				if(this.checkinStatus == '2'){
					userUtils.loginCheck().then()
				}
			},
			
			//页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh: function() {
				
				this.pageParams.pageIndex = 1;
				this.topicList = '';

				this.init()
				uni.stopPullDownRefresh();
			},

			// 页面上拉触底事件的处理函数
			onReachBottom: function() {
				// console.log("1234444")
				// if (!this.pullUpOn) return;
				// this.loadding = true;
				// if (this.pageIndex == 3) {
				// 	this.loadding = false;
				// 	this.pullUpOn = false;
				// } else {
				// 	this.newsList = this.newsList.concat(this.loadData);
				// 	this.pageIndex = this.pageIndex + 1;
				// }
				if(this.pageParams.pageTotal == this.pageParams.pageIndex){
					return;
				}
				this.endline = false;
				
				this.pageParams.pageIndex += 1;
				this.getTopicByCommunityIdAndTopicCategoryId();
			},
			addTopicHandler(){
				userUtils.loginCheck().then(()=>{
					uni.navigateTo({
					    url: `/pages/community/publish?communityCategoryId=${this.communityCategoryId}&communityId=${this.communityId}`
					});
				})
				
			}
		},
		onPageScroll(e) {

			this.scrollTop = e.scrollTop;

		},
	}

</script>

<style >
	@import '@/static/style/thorui.css';

	/*myself*/

	.communityImage{
		width: 110rpx;
	}

	.title{
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
	}

	.fx{
		animation: fade 1000ms infinite;
		-webkit-animation: fade 1000ms infinite;
	}

	/*myself*/

	@keyframes fade {
	    from {
	        opacity: 1.0;
	    }
	    50% {
	        opacity: 0.4;
	    }
	    to {
	        opacity: 1.0;
	    }
	}

	@-webkit-keyframes fade {
	    from {
	        opacity: 1.0;
	    }
	    50% {
	        opacity: 0.4;
	    }
	    to {
	        opacity: 1.0;
	    }
	}


	/*searchbox*/

	.tui-searchbox {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tui-search-input {
		padding-left: 20rpx;
		width: 100%;
		height: 72rpx;
		background: #fafafa;
		border-radius: 36rpx;
		font-size: 30rpx;
		color: #A8ABB8;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.tui-search-text {
		padding-left: 16rpx;
	}

	/*searchbox*/

	/* #ifndef APP-PLUS */


	/* #endif */

	.tui-tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #fafafa;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* #ifdef H5 */

		top: 44px;
		left: 0;
		z-index: 999;
		/* #endif */
	}

	.tui-line-h {
		/* #ifdef APP-PLUS */
		height: 1rpx;
		background-color: #cccccc;
		/* #endif */
		position: relative;
	}

	/* #ifndef APP-PLUS*/
	.tui-line-h::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #cccccc;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	/* #endif */

	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.tui-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-tab-item-title-active {
		color: #5677fc;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.tui-swiper-box {
		flex: 1 !important;
		/* #ifdef H5 */
		margin-top: 80rpx;
		/* #endif */
	}

	.tui-swiper-item {
		flex: 1 !important;
		flex-direction: row;
	}

	.tui-scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.tui-update-tips {
		position: absolute;
		left: 0;
		top: 41px;
		right: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #fddd9b;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.tui-update-tips-text {
		font-size: 14px;
		color: #ffffff;
	}

	.tui-refresh {
		width: 750rpx;
		height: 64px;
		justify-content: center;
	}

	.tui-refresh-view {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.tui-refresh-icon {
		width: 20px;
		height: 20px;
		transition-duration: 0.25s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 10px 10px;
	}

	.tui-refresh-icon-active {
		transform: rotate(180deg);
	}

	.tui-loading-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

	.tui-loading-text {
		margin-left: 2px;
		font-size: 14px;
		color: #999999;
	}

	.tui-loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: center;
		position: relative;
	}

	.tui-loadmore-line {
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #e5e5e5;
		width: 320rpx;
		position: absolute;
		z-index: -1;
	}

	.tui-loading-more-text {
		padding-left: 8rpx;
		padding-right: 8rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		background-color: #fafafa;
		text-align: center;
		color: #999;
	}

</style>
